<template>
  <div class="homtop">
    <div class="box">
        <div class="top">
            <img src="../../public/fenlie.png" alt="">
            <img class="gf" src="../../public/goi.gif"  alt="">
            <img src="../../public/my.png" alt="">
        </div>
        <div class="search" @click="$router.push({ path:'/Search',query:{id:value}})">
            <van-search background="none" shape="round" v-model="value" placeholder="手机iphone" />
        </div>
    </div>
    <div class="second">
        <div class="boxsec">
            <div class="boxs" v-for="(item,index) in arr" :key="index">
                <img :src="item.pic" alt="">
                <p>{{item.text}}</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    data() {
        return {
            value:'',
            arr: [
                { pic: '../../home.png', text: '苏宁家电' },
                { pic: '../../home1.png', text: '苏宁超市' },
                { pic: '../../home2.png', text: '苏宁宜品' },
                { pic: '../../home3.png', text: '手机数码' },
                { pic: '../../home4.png', text: '家居家装' },
                { pic: '../../home5.png', text: '服饰百货' },
                { pic: '../../home6.png', text: '生活家电' },
                { pic: '../../home7.png', text: '签到有礼' },
                { pic: '../../home8.png', text: '领卷中心' },
                { pic: '../../home9.png', text: '更多频道' }
            ]
        }
    },
}
</script>

<style lang="scss" scoped>
.homtop{
    width: 100%;
    height: 2.52rem;
    box-sizing: border-box;
    .box{
        width: 100%;
        height: 0.88rem;
        background-image: url("../../public/top1.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% ;
        overflow: hidden;
        .top{
            height: 50%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 2.5%;
            // margin-top: 0.09rem;
            .gf{
                width: 1.67rem;
            }
            img{
                width: 0.18rem;
                height: 0.3rem;
            }
        }
        .search{
            .van-search{
                padding: 0rem 0.12rem ;
            }
        }
    }
    .second{
        width: 100%;
        background-image: url('../../public/second.jpg');
        background-size: 100%;
        height: 1.62rem;
        background-repeat: no-repeat;
        .boxsec{
            margin: 0 2.5%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            background-color: #ffffff;
            border-radius: 0.07rem;
            box-sizing: border-box;
            .boxs{
                width: 20%;
                height: 0.55rem;
                font-size: 0.12rem;
                text-align: center;
                margin-top: 0.06rem;
                img{
                    width: 0.38rem;
                    height: 0.38rem;
                    padding: 0.04rem;
                }
            }
        }
    }
}
</style>